<template>
    <div ref="previewer" v-show="false">
        <img :src="file.src" :alt="file.alt"/>
    </div>
</template>


<script>
import Viewer from 'viewerjs';
export default {
    props:{
        file:{
            type:Object,
            default(){
                return {};
            }
        }
    },
    data(){
        return {
            viewer:null
        }
    },
    computed:{

    },
    mounted(){
        this.create(this.$refs.previewer);
        // console.log('mounted',this.viewer.element);
    },
    updated(){
        this.viewer.update();
        // console.log('updated',this.viewer.element);
    },
    watch:{

    },
    components:{
    },
    methods:{
        show(){
            this.viewer.show();
        },
        create(element){
            this.viewer=new Viewer(element, {
                navbar:false,
                toolbar: {
                    zoomIn: 1,
                    zoomOut: 1,
                    oneToOne: 1,
                    reset: 1,
                    prev: 0,
                    play: {
                        show: 1,
                        size: 'large',
                    },
                    next: 0,
                    rotateLeft: 1,
                    rotateRight: 1,
                    flipHorizontal: 1,
                    flipVertical: 1,
                }
            });
        }
    }
}
</script>

<style scoped lang="less">


</style>


